import React, { useEffect, useState } from 'react';
import { formatSeconds } from '@/utils/utils';
import { connect } from 'dva';
import styles from './index.less';
import { Empty, Button, Modal, Input } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import onlineClass2 from '@/pages/assets/onlineClass2.png';

let newPage: Window | null;

/**
 * 我的网课列表页面
 */
const myOnlineClass = (props: any) => {
  const { model, dispatch, loading } = props;

  const [isSelectDel, setisSelectDel] = useState(false); //是否选择删除
  const [isShowType, setisShowType] = useState(false); //是否展示编辑网课类型弹框

  const isLoading = loading.effects['draftModel/getContent']; //是否加载数据中

  useEffect(() => {
    action();
  }, []);

  //请求获取数据
  const action = async () => {
    dispatch({
      type: 'draftModel/getContent',
    });
  };

  //打开详情页
  const openPage = (url: string) => {
    if (newPage) {
      newPage.close();
    }
    newPage = window.open(url);
  };

  //选择网课删除
  const selectDel = () => {
    if (isSelectDel) {
      Modal.confirm({
        title: '是否确认修改？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          dispatch({
            type: 'draftModel/saveData',
          });
          setisSelectDel(false);
        },
        onCancel: () => {
          setisSelectDel(false);
          action();
        },
      });
      return;
    }
    setisSelectDel(!isSelectDel);
  };

  //删除指定网课
  const deleteVideo = (bvid: string, type: string) => {
    dispatch({
      type: 'draftModel/deleteVideo',
      payload: { bvid, type },
    });
  };

  //打开编辑网课类型弹框
  const openEditType = () => {
    setisShowType(true);
  };
  //确认编辑网课类型弹框
  const okType = () => {
    cancelType();
  };
  //关闭编辑网课类型弹框
  const cancelType = () => {
    setisShowType(false);
  };

  return (
    <div className={styles.page}>
      <div className={styles.handle}>
        {/*编辑网课列表 */}
        <Button type="primary" className={styles.btn} onClick={selectDel}>
          {isSelectDel ? '确定网课删除' : '选择网课删除'}
        </Button>
        <Button type="primary" className={styles.btn} onClick={openEditType}>
          网课类型编辑
        </Button>
        <Button type="primary" className={styles.btn}>
          导入网课json
        </Button>
        <Button type="primary" className={styles.btn}>
          导出网课json
        </Button>
      </div>
      <div className={styles.data}>
        {model.types.map((key: string) => {
          return (
            <div key={key}>
              <div className={styles.boxTitle}>
                <img className={styles.icon} src={onlineClass2} alt="" />
                {key}
              </div>
              <div className={styles['zone-list-box']}>
                {model.data[key].map((oc: any, i: number) => {
                  return (
                    <div key={i} className={styles['video-card-common']}>
                      <div
                        className={`${styles['card-pic']} ${styles['card-pic-hover']}`}
                      >
                        <a
                          target="_blank"
                          href={`https://www.bilibili.com/video/${oc.bvid}${
                            oc.p !== 1 ? '?p=' + oc.p : ''
                          }`}
                        >
                          <img src={oc.pic} alt={oc.title} title={oc.title} />
                          {oc.videos > 1 ? (
                            <div className={styles.playNote}>
                              目前已学习到{oc.p}P
                            </div>
                          ) : null}
                          <div className={styles.count}>
                            <div className={styles.left}>
                              <span>
                                <i
                                  className={`${styles.bilifont} ${styles['bili-icon_shipin_bofangshu']}`}
                                ></i>
                              </span>
                              <span>
                                <i
                                  className={`${styles.bilifont} ${styles['bili-icon_shipin_dianzanshu']}`}
                                ></i>
                              </span>
                            </div>
                            <div className={styles.right}>
                              <span>{formatSeconds(oc.duration)}</span>
                            </div>
                          </div>
                          <i className={styles.crown}></i>
                        </a>
                        <div
                          className={`${styles['watch-later-video']} ${styles['van-watchlater']} ${styles.black}`}
                        >
                          <span className={styles['wl-tips']}></span>
                        </div>
                      </div>
                      <a
                        href={`https://www.bilibili.com/video/${oc.bvid}${
                          oc.p !== 1 ? '?p=' + oc.p : ''
                        }`}
                        target="_blank"
                        title={oc.title}
                        className={styles.title}
                      >
                        {oc.title}
                      </a>
                      <a
                        href={`https://space.bilibili.com/${oc.owner.mid}/`}
                        target="_blank"
                        className={styles.up}
                      >
                        <i
                          style={{ backgroundImage: `url(${oc.owner.face})` }}
                          className={styles['upzhu-icon']}
                        ></i>
                        {oc.owner.name}
                      </a>
                      {isSelectDel && (
                        <div className={styles.selectBox}>
                          <CloseOutlined
                            className={styles.select}
                            onClick={() => deleteVideo(oc.bvid, key)}
                          />
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
      {/* {model.onlineClassList.length === 0 && (
        <Empty
          image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
          className={styles.empty}
          imageStyle={{
            height: 60,
          }}
          description={<span>当前您还没有收藏网课，快去收藏吧！</span>}
        >
          <Button type="primary">去bilibili首页</Button>
        </Empty>
      )} */}
      <Modal
        title="编辑网课类型"
        className={styles.editTypeModal}
        visible={isShowType}
        onOk={okType}
        onCancel={cancelType}
      >
        <p>网课类型列表：</p>
        {model.types.map((type: string) => {
          return (
            <div key={type} className={styles.type}>
              <Input placeholder="请输入网课类型" defaultValue={type} />
            </div>
          );
        })}
      </Modal>
    </div>
  );
};

export default connect(({ draftModel, loading }: any) => ({
  model: draftModel,
  loading,
}))(myOnlineClass);
